Of course the reason we are all interested in Layout Master is to in fact create some page layouts. Now we turn to that aspect of the application. Page layouts in Layout Master simply comprise a number of positioned elements. Earlier we took a brief look at what these elements are.
Layout Master has two editing modes - Wireframe and WYSIWYG.
To enable WYSIWYG editing
1. choose from the menu, when the menu item is not checked
A tick alongside the menu item indicates that the current previewing mode is WYSIWYG.
To enable Wireframe editing
1. choose from the menu when the menu item is checked
This toggles WYSIWYG editing off.
Wireframe mode shows positioned elements as outlined "boxes". Their name (that is the id attribute of the element) is visible inside the box. If you have applied background color or border properties, these are also visible. You'll probably find that for most layout work, this is the quickest and most efficient mode for editing.
figure 5: wireframe editing
WYSIWYG mode shows the content of the elements. All text and images are visible, although style sheets aren't applied. The idea behind this mode is to allow exact placement of elements when this is important.
figure 6: WYSIWYG editing
You'll notice that some sophisticated features of browser rendering (such as elements having transparent backgrounds) aren't supported. Remember, we aren't trying to build a HTML+CSS rendering engine here, but rather a tool to help build page layouts.
To enable WYSIWYG editing
1. choose from the menu, when the menu item is not checked
A tick alongside the menu item indicates that the current previewing mode is WYSIWYG.
To enable Wireframe editing
1. choose from the menu when the menu item is checked
This toggles WYSIWYG editing off.
So what is a positioned element? With CSS2 any element can be positioned anywhere on a page. But current browsers don't quite support this. So, like other applications which create page layouts (DreamWeaver and GoLive 4 or higher for instance), Layout Master restricts itself to positioning using <div> elements. This ensures compatibility with all current browsers, all browsers which will in future support CSS based positioning, and major development tools.
A positioned element then is a <div>, with an id attribute (that is, a name which is unique to that element on that page), along with a style sheet rule which gives the element a position and other properties (such as background and border properties). You can edit these elements by dragging and dropping, cutting, copying and pasting, and using editors for the various properties. That's what we are going to take a look at now.
To add a new positioned element
1. choose from the
or
2. control click the layout window and choose from the contextual menu
A new positioned element is placed on the page, with a top of 100px, a left of 100px, as well as width and height of 100px.
Layout Master lets you drag and drop or insert positioned elements from external text, HTML and image files, and text clippings.
The following types of content can be inserted as new positioned elements.
To insert a new positioned element
1. Choose from the menu
2a. in the dialog box which opens, choose the name of the file to insert as a new positioned element
or
2b. drag the file which contains the text or HTML, or the image file into the layout window
or
2c. drag the text you want as the content of the new element from any drag and drop application into the layout window
A new positioned element is created, with the appropriate contents, where the file or clipping was dropped.
The layout view is where you create and edit your page layouts directly.
figure 7: the layout view
Once we've added a new positioned element, we will want to edit positioning and other properties of the element. We do this with both drag and drop editing in the layout view, and using a number of editors. We edit these properties using the Properties Editor. First, let's open the editor.
To open the properties editor
1. double click the element
or
2. choose from the menu
or
3. choose the name of the group of properties you want to edit, e.g. , from the menu.
or
4. click the any of the Location button 
, the Background and Border button 
or the Content button 
in the launcher
figure 8: the Properties Editor - Location tab
The Properties Editor has two sections. The first is for editing the element's name and its type of positioning.
The second has 3 tabs, for three sets of related properties.
The name of the element is its id. In the HTML, the name looks like this <div id="positioned-element1">. That is, the name we give an element is the value of its id attribute. We use id, rather than class, because only one element on a page can have a given id. ids can contain only the characters a..z, A..Z and 0..9 as well as the hyphen "-". They cannot contain spaces or underscores "_". On top of all that, they must not commence with a hyphen nor a numeral. If you think that is a bit of a pain to remember then forget it, Layout Master won't let you create a name that isn't valid.
To give an element a name, or edit its name
1. enter the name in the field labeled Name at the top of the properties editor.
Elements can take different types of positioning. There are four in all, though only two are relevant to Layout Master, absolute and fixed. Absolutely positioned elements are placed with respect to the top left hand corner of their parent element. Often, this is the page, though elements can be nested inside one another. When elements are nested, their position is with respect to the top left hand corner of the parent element. Later we will see how to use Layout Master to create nested elements.
Fixed elements are similarly positioned, though the positioning is with respect to the window, not the page. That means, if the page is scrolled down, the element's position remains fixed with respect to the top left hand corner of the window.
As it is widely supported in browsers, the default setting in layout Master for Position is absolute. Note also that you must set a value for the Position property.
To specify the type of positioning for an element
1. choose or from the popup menu labeled Position beneath the field labeled Name at the top of the properties editor
Layout Master also allows you to edit various other properties of an element using editors. Often there are other ways of editing the same properties. For example, the top and left, width and height of an element can be changed by dragging and dropping it, or resizing it. The z-index of an element (how close to the front of the page it is relative to other elements) can be changed by using the menu to move elements closer or further away.
The properties are edited using the three element properties tabs of the Properties Editor, named "Location", "Background and Border" and "Content".
To edit a set of properties in a tab
1. click the name of that tab
The Location tab lets you edit the position and size of the element, as well as its z-index (that is, how close it is to the front of the page relative to other elements on the page), and whether it is visible or not.
figure 9: the Location tab
Using this tab is very straightforward.
Editing the location and size of the element
The top, left, width and height are all edited in the same way, using a "Length Chooser". This is so named, because numerical values are termed "lengths" in CSS. To learn about the length chooser, see Appendix Two.
When you specify a value using a percentage, then the value is calculated as that percentage of the width or height of the parent element. For example, a left of 10% specifies that the left hand edge of the element should be 10% of the width of its parent element from the parent element's left hand edge. If an element is not contained within another element then its parent element is the page. A top of 10% specifies that the top edge of the element should be 10% of the height of its parent element from the parent element's top edge.
When you set a value using percentages, resize the window, to see what happens to the element. Using percentages. You can create layouts which adapt to the size of the window used to view the page.
To learn more about the top, left, width and height properties, see the relevant entries in Appendix Three.
Editing the z-index of the element
The z-index specifies how close to the front of the page an element is with respect to other elements on the page. The higher the z-index, the close an element is to the front. However, there are a couple of complications.
We discuss the z-index property in detail in Appendix Three.
To set the z-index of an element
1. enter the z-index value in the field labeled Z Index
2. for a negative z-index, choose "-" from the popup menu to the left of the field
The Background and Border tab allows you to edit the background and the border properties of an element. These include
as well as
figure 10: Background and Border tab
Background colors of an element are edited like all other colors in Layout Master, using the color chooser. See Appendix Two for more information.
Editing the background image
You edit the background image just like editing the background image of the page, using a URL chooser. See Appendix Two for more information.
Editing background repeat
You can edit how a background image repeats using the background repeat editor.
1. choose a value from the popup menu labeled Repeat
Positioned elements will often have borders, and Layout Master lets you edit these. In the border tab you can specify a style of border, a width for the border and a color for the border.
figure 11: Background and Border tab
To edit the style of border
1. choose a style from the popup menu labeled Style
Note that Layout Master previews all borders as solid style. You will have to preview in a browser to see how your border is really going to look.
To edit the width of the border
1. choose a keyword value, or a unit from the popup menu to the right of the window item labeled width
2. if you chose a unit above, enter the value of the width in the field to the left of that popup menu
To edit the color of the border
You edit the color of a border exactly as you would the background color. See Appendix Two for information on the color chooser.
For more details on border style, border width and border color, see Appendix Three.
Obviously positioned elements contain content. A <div> can contain other <div>s, paragraphs, tables, images and so on. In the content tab you can see and edit the contents of a positioned element. We recommend you use it sparingly, and save most of your editing for a text editor or HTML tool of choice. But we think it's handy to be able to make some changes to your content without leaving the application.
figure 12: the Content tab
In this tab you can also specify how the element contents are displayed when they overflow the element (that is when they can't fit into the element)
To edit the contents of an element
1. simply type, or cut, copy, paste and clear the contents of the field labeled Content
For more than simple editing, we recommend you use your tool of choice for HTML editing. You can either edit in your editor of choice and paste the new HTML in the content field of the properties editor, or open a layout with your editor of choice, then save any changes. You can even keep your Layout open in Layout Master while doing this, as Layout Master senses any changes in your layouts while they are open, and gives you the option of updating them.
To specify how overflowing contents of an element should be dealt with
1. choose , , or from the popup menu labeled Overflow
For details on the overflow property, see Appendix Three.
